<script lang="ts">
import { defineComponent, computed, h } from 'vue'
import { useStore } from '../store'
import { MutationTypes } from '../store/types'

export default defineComponent({
  name: 'CompositionAPIComponent',
  setup() {
    const store = useStore()

    const counter = computed(() => store.state.counter)

    function resetCounter() {
      store.commit(MutationTypes.SET_COUNTER, 0)
    }

    return () =>
      h('section', undefined, [
        h('h2', undefined, 'Composition API Component'),
        h('p', undefined, counter.value.toString()),
        h('button', { type: 'button', onClick: resetCounter }, 'Reset coutner'),
      ])
  },
})
</script>
